<template>
	<view class="index-page page">
		<loading v-if="showLoading"></loading>
		<CustomNav :normal="{ textColor: '#fff', background: 'linear-gradient(to right, #FF2F34,#FF2F34)' }"
			title="益联生态"></CustomNav>
		<view class="content" :style="'margin-top:'+mt">
			<view class="background"></view>
			<view class="search-block">
				<view class="address-block" @click="navigate('/page_other/region/index?type=1')">
					<image
						src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/site1.png"
						mode=""></image>
					<view class="address">{{areaInfo.area}}</view>
				</view>
				<view class="input-block">
					<view class="input-left">
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/search.png"
							mode=""></image>
						<input placeholder="请输入关键字" v-model="businessName" @confirm="getMap()" />
					</view>
					<view class="search" @click="search">搜索</view>
				</view>
			</view>
			<view class="swiper-block">
				<swiper :indicator-dots="false" :autoplay="true" :circular="true" :interval="5000"
					style="height: 320rpx;">
					<swiper-item v-for="(item, index) in swiperList" :key="item.id"
						@click="bannerJump(item.jump,item.jumpPartnerId)">
						<image :src="cloudStorage+item.bannerUrl"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- <view class="userPhoto" v-if="userList.length>0">
				<template style="position: relative;">
					<WFscroll :listArr="userList" :scrollHeight="50" :scrollTimer="true" style="border-radius: 50px;">
					</WFscroll>
				</template>
			</view> -->
			<view class="info-block">
				<view class="menu-block">
					<view class="item" v-for="item in menuList" :key="item.id"
						@click="navigate('/page_other/activity/list?type='+item.id+'&title='+item.name)">
						<image :src="cloudStorage+item.url"></image>
						<view class="title">{{item.name}}</view>
					</view>
				</view>
				<swiper style="height: 220rpx; width: 100%;" :indicator-dots="false" :autoplay="true" :circular="true"
					:interval="5500">
					<swiper-item v-for="(item, index) in swiperList1" :key="item.id"
						@click="bannerJump(item.jump,item.jumpPartnerId)">
						<image style="width: 100%;height: 220rpx;border-radius: 20rpx;"
							:src="cloudStorage+item.bannerUrl" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="jiuyekeujiu">
					<view class=""></view>
				</view>
				<view class="title-block" style="margin-top: 10rpx;">
					<view class="title FangZhengHanZhenGuangBiaoJianTi">甄选商家</view>
					<view class="more" @click="navigate('/page_other/activity/index')">
						<view class="all">全部</view>
						<image class="icon" mode="widthFix"
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/right.png">
						</image>
					</view>
				</view>

				<view class="info-block">
					<view class="screen">
						<view class="all">
							<picker class="text" :range="industry" range-key="name" :value="industryIndex"
								@change="bindIndustry">
								{{industry[industryIndex]['name']}}
							</picker>
							<image
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
							</image>
						</view>
						<view class="all">
							<view class="text" @click="screen(1)" :class="sort==1?'active':''">附近</view>
							<image
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
							</image>
						</view>
						<view class="all">
							<view class="text" @click="screen(2)" :class="sort==2?'active':''">智能排序</view>
							<image
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
							</image>
						</view>
					</view>
					<template v-if="preferenceList.length>0">
						<view class="shop-block1" v-for="(item,index) in preferenceList" :key="item.id"
							@click="navigate('/page_other/activity/merchant?id='+item.id+'&longitude='+longitude+'&latitude='+latitude)">
							<view class="shop-item">
								<view class="shop-left">
									<image :src="cloudStorage+item.businessFace" style="width: 200rpx;height: 180rpx;"
										mode="aspectFill">
									</image>
								</view>
								<view class="shop-right">
									<view class="shop-title">{{item.businessName}}</view>
									<view class="label-item" v-if="item.label">
										<view class="label-info">
											<image
												src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/renqi.png"
												class="img">
											</image>
											<view class="tips">{{item.label||''}}</view>
										</view>
									</view>
									<view class="shop-address">
										<view class="address-left">
											<image
												src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/site.png">
											</image>
											<view class="address">{{item.address}}</view>
										</view>
										<view class="address-right">
											<image
												src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/distance.png">
											</image>
											<view class="distance">{{item.distance}}km</view>
										</view>
									</view>
								</view>
							</view>
							<view class="line" v-if="item.limitedTimeOffer"></view>
							<view class="preference" v-if="item.limitedTimeOffer">
								<view class="timeOut">限时优惠</view>
								<view class="discount">{{item.limitedTimeOffer}}</view>
							</view>
						</view>
					</template>
					<view v-if="more==false&&preferenceList.length==0" class="empty">暂无数据</view>
					<view v-else-if="more==false&&preferenceList.length>0" class="empty">没有更多了</view>
				</view>
			</view>
		</view>
		<Tabbar style="position: fixed; left: 0; bottom: 0"></Tabbar>
	</view>
</template>

<script>
	import CustomNav from '@/components/CustomNav/CustomNav1';
	import Tabbar from '@/components/Tabbar/Tabbar';
	import WFscroll from '@/components/WF-scroll/WF-scroll1.vue';
	import {
		isMore
	} from '@/util/util.js'
	import {
		getStorage,
		setStorage
	} from '@/util/auth';
	import {
		getBannerList,
		getBusinessTypeList,
		getRollListApi,
		queryAndSelectMerchants
	} from '@/api/home.js'
	import {
		downloadFile,
	} from '@/uni_modules/almost-lottery/utils/almost-utils.js'
	import {
		getListApi
	} from '@/api/shopping.js'
	export default {
		components: {
			Tabbar,
			CustomNav,
			WFscroll
		},
		data() {
			return {
				businessName: '',
				areaInfo: {
					area: '请选择',
					areaId: ''
				},
				more: true,
				userList: [],
				list:[],
				page: 1,
				limit: 10,
				latitude: '',
				longitude: '',
				preferenceList: [],
				menuList: [],
				swiperList: [],
				swiperList1: [],
				form: {
					isIndustry: '',
				},
				industryIndex: 0,
				industry: [],
				sort: 0
			};
		},
		async onLoad(e) {
			if(e.scene)
			{
				setStorage('scene', e.scene)
			}
			//在活动页面预先下载抽奖资源
			this.getPrizeList()
			const userInfo = getStorage('token');
			if (getStorage('position')) {
				this.areaInfo = getStorage('position');
			}
			uni.$on('selectItem', (selectData) => {
				this.areaInfo = selectData;
				this.getTranslateActivityList()
			})
			uni.showCustomLoading();
			Promise.all([this.getTranslateActivityList(), this.getBusinessTypeList(), this.getBannerList(), this
				.getBannerListMiddle(), this.getRollList()
			]).finally(() => {
				uni.hideCustomLoading()
			})
		},
		methods: {
			//预先下载活动抽奖的逻辑
			getPrizeList() {
				if(getStorage('user'))
				{
					return getListApi().then(res => {
						if (res === '暂无活动') {
							return;
						} else {
							if (res.prizeList) {
								let data = res.prizeList || []
								data.forEach(item => {
									item.prizeImage = this.cloudStorage + item.prizeImage
									downloadFile(item.prizeImage)
								})
								
							}
							
						}
					})
				}
				
			},
			//获取商家类型
			getBusinessTypeList() {
				return getBusinessTypeList().then((res) => {
					let list = res || []
					var obj = {
						id: 0,
						name: '全部'
					}
					list.unshift(obj)
					this.industry = list
					this.menuList = list.filter(item => item.id !== 0);
				})
			},
			bindIndustry(e) {
				this.industryIndex = e.detail.value;
				this.form.isIndustry = this.industry[this.industryIndex].id
				this.page = 1
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getTranslateActivityList(true)
			},
			bannerJump(jump, jumpPartnerId) {
				if (jump == 1) {
					uni.navigateTo({
						url: '/page_other/activity/merchant?id=' + jumpPartnerId + '&longitude=' + this.longitude +
							'&latitude=' + this.latitude
					})
				}
			},
			screen(e) {
				this.sort = e
				this.page = 1
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getTranslateActivityList(true)
			},
			search() {
				this.getTranslateActivityList()
			},
			handleRefresh() {
				this.page = 1;
				this.more = true
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getTranslateActivityList(true)
			},
			scrollChange(e) {
				uni.$emit('scrollChange', e);
			},
			getRollList() {
				return getRollListApi().then((res) => {
					this.userList = res
				})
			},

		onReachBottom() {
			if (this.more) {
				this.page++;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getTranslateActivityList();
			}
		},
			//顶部轮播
			getBannerList() {
				return getBannerList({
					type: 1
				}).then((res) => {
					this.swiperList = res.list
				})
			},
			//中间轮播图
			getBannerListMiddle() {
				return getBannerList({
					type: 2
				}).then((res) => {
					this.swiperList1 = res.list
				})
			},
			//甄选商家活动列表
			getTranslateActivityList(refresh = false) {
				uni.getLocation({
					success: (current) => {
						this.latitude = current.latitude;
						this.longitude = current.longitude;
						setStorage('latitude', this.latitude)
						setStorage('longitude', this.longitude)
						return queryAndSelectMerchants({
							page: this.page,
							limit: this.limit,
							latitude: this.latitude,
							longitude: this.longitude,
							businessName: this.businessName,
							sort: this.sort,
							type:this.form.isIndustry,
						}).then((res) => {
							let list = res.list || [];
							if (refresh) {
								this.preferenceList = list;
							} else {
								this.preferenceList = [...this.preferenceList, ...list]
							}
							this.more = isMore(this.page, this.limit, res.count)
					
							uni.hideLoading()
						})
					},
					fail: (e) => {
						this.showToast('获取位置失败，请重试！');
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.index-page {
		overflow: hidden;
		.content {
			width: 100%;
			padding: 30rpx;
			margin-bottom: 140rpx;
			position: relative;

			// ...其他部分保持不变
			.background {
				position: absolute;
				top: -30rpx;
				left: 0;
				width: 100%;
				height: calc(100vh - 1300rpx); // 140rpx是您提到的search-block和swiper-block的高度之和
				background: linear-gradient(to bottom, #FF2F34, #FF6B18, white); // 设置红色渐变背景
				z-index: -1; // 将背景置于内容之后
			}

			.search-block {
				width: 100%;
				height: 65rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.address-block {
					padding: 5rpx;
					display: flex;
					background-color: #FFFFFF;
					align-items: center;
					justify-content: center;
					width: 160rpx;
					height: 70rpx;
					border-radius: 50px;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 5rpx;
					}

					.address {
						color: #FF2F34;
						font-size: 28rpx;
						width: calc(100% - 40rpx);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-align: center;
					}
				}

				.input-block {
					display: flex;
					background-color: #FFFFFF;
					height: 70rpx;
					border-radius: 50px;
					align-items: center;
					justify-content: space-between;
					width: calc(100% - 180rpx);

					padding: 6rpx 6rpx 6rpx 20rpx;

					.input-left {
						width: calc(100% - 140rpx);
						display: flex;

						image {
							width: 30rpx;
							height: 30rpx;
							margin: 7rpx 7rpx 0 0;
						}

						input {
							border-radius: 50px;
							width: 100%;
							font-size: 28rpx;
						}
					}

					.search {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 110rpx;
						border-radius: 50rpx;
						height: 100%;
						padding-bottom: 5rpx;
						color: #FFFFFF;
						background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
						font-size: 28rpx;
					}
				}
			}

			.swiper-block {
				width: 100%;
				height: 320rpx;
				border-radius: 20rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;

				}
			}

			.userPhoto {
				position: absolute;
				top: 350rpx;
				display: flex;
				align-items: center;
				background: rgba(0, 0, 0, 0.6);
				border-radius: 60px;
				padding: 6rpx;
				margin-left: 10rpx;

				image {
					width: 45rpx;
					height: 45rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				.username {
					font-size: 28rpx;
					color: #FFFFFF;
					width: calc(100% - 60rpx);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}


			.info-block {
				margin-top: 30rpx;

				.menu-block {
					display: flex;
					flex-wrap: wrap;
					background-color: #fff;
					// padding: 20rpx 30rpx 0 30rpx;
					border-radius: 20rpx;
					margin-bottom: 20rpx;

					.item:nth-child(5n) {
						margin-right: 0;
					}

					.item {
						width: calc((100% - 80rpx) / 5);
						margin-right: 20rpx;
						text-align: center;
						margin-bottom: 20rpx;

						image {
							width: 50rpx;
							height: 50rpx;
						}

						.title {
							font-size: 26rpx;
							color: #1A1A1A;
						}
					}

				}

				.illustration {
					margin-top: 20rpx;
					width: 100%;
				}

				.notice-block {
					border-radius: 15rpx;
					display: flex;
					align-items: center;
					background-color: #FFFFFF;
					margin-top: 20rpx;
					height: 110rpx;
					margin-bottom: 30rpx;

					.notice-img {
						width: 140rpx;
						height: 120rpx;
						padding: 0 20rpx;
					}

					.notice-item {
						width: calc(100% - 160rpx);
						display: flex;
						align-items: center;
						background-image: linear-gradient(to right, #FFFFFF, #FEF8F6);
						height: 80rpx;
						border-radius: 20rpx;

						.name {
							background: linear-gradient(to right, #FE393A 30%, #FE4434 60%, #FE4E2E 90%);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							font-size: 34 rpx;
							width: 200 rpx;
							font-family: 'FangZhengHanZhenGuangBiaoJianTi';
						}

						.text {
							background: linear-gradient(to right, #FE512C 30%, #FE5B26 60%, #FE6B1D 90%);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							font-size: 34rpx;
							font-family: 'FangZhengHanZhenGuangBiaoJianTi';
						}
					}
				}

				.title-block {
					margin-top: 10rpx;
					width: 100%;
					display: flex;
					justify-content: space-between;
					color: #FF2F34;
					align-items: center;

					.title {
						font-size: 36rpx;
					}

					.more {
						display: flex;
						font-size: 28rpx;
						align-items: center;

						.icon {
							width: 20rpx;
							margin-left: 10rpx;
							// height: 20rpx;
						}
					}
				}



				.info-block {

					margin-top: 30rpx;
					border-radius: 50rpx 50rpx 0 0;
					// padding: 30rpx;

					.screen {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 30rpx;

						.all {
							display: flex;
							align-items: center;

							.text {
								font-size: 28rpx;
								color: #3D3D3D;
								margin-right: 10rpx;
							}

							.text.active {
								color: #FF2F34;
							}

							image {
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					.shop-block {
						margin-top: 20rpx;
						display: flex;
						width: 100%;
						background-color: #FFFFFF;
						padding: 30rpx;
						border-radius: 20rpx;

						.shop-left {
							width: 200rpx;
							border-radius: 20rpx;
							margin-right: 20rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 20rpx;
							}
						}

						.shop-right {
							width: calc(100% - 220rpx);

							.shop-title {
								font-size: 32rpx;
								color: #1A1A1A;
								font-weight: bold;
							}

							.label-item {
								display: flex;
								align-items: center;

								.label-info {
									display: flex;
									align-items: center;
									background: #FEF3EF;
									padding: 6rpx 18rpx;
									margin-top: 20rpx;
									border-radius: 6rpx;

									.img {
										width: 25rpx;
										height: 25rpx;
										margin-right: 10rpx;
									}

									.tips {
										font-size: 24rpx;
										color: #FF6830;
									}
								}
							}

							.shop-tips {
								margin-top: 12rpx;
								width: 80%;
								padding: 5rpx 10rpx;
								background-color: #FEF3EF;
								display: flex;
								align-items: center;
								border-radius: 10rpx;
								text-align: center;

								image {
									width: 20rpx;
									height: 20rpx;
									margin-right: 10rpx;
								}

								.tips {
									font-size: 24rpx;
									color: #FF6831;
									font-weight: normal;
								}
							}

							.shop-score {
								display: flex;
								align-items: center;
								margin-top: 12rpx;

								.score {
									font-size: 28rpx;
									margin-left: 5rpx;
									color: #FF2F34;
								}
							}

							.shop-address {
								width: 100%;
								display: flex;
								justify-content: space-between;
								margin-top: 40rpx;

								.address-left {
									display: flex;
									justify-content: center;
									align-items: center;
									width: calc(100% - 60rpx);

									image {
										width: 20rpx;
										height: 20rpx;
										margin-right: 8rpx;
									}

									.address {
										font-size: 24rpx;
										color: #767676;
									}
								}

								.address-right {
									display: flex;
									justify-content: center;
									align-items: center;

									image {
										width: 20rpx;
										height: 20rpx;
										margin-right: 4rpx;
									}

									.distance {
										font-size: 24rpx;
										color: #767676;
									}
								}
							}
						}

					}

					.shop-block1 {
						width: 100%;
						background-color: #FFFFFF;
						padding: 30rpx;
						border-radius: 20rpx;
						margin-bottom: 20rpx;

						.line {
							width: 100%;
							height: 2rpx;
							background-color: #EEEEEE;
							margin: 20rpx 0;
						}

						.preference {
							display: flex;
							justify-content: center;

							.timeOut {
								border-radius: 10rpx;
								padding: 5rpx 10rpx;
								margin-right: 8rpx;
								font-size: 24rpx;
								background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
								color: #FFFFFF;
							}

							.discount {
								font-size: 28rpx;
								color: #FF2F34;
							}
						}

						.shop-item {
							margin-top: 20rpx;
							display: flex;
							width: 100%;
							background-color: #FFFFFF;
						}

						.shop-left {
							width: 200rpx;
							border-radius: 20rpx;
							margin-right: 20rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 20rpx;
							}
						}

						.shop-right {
							width: calc(100% - 220rpx);

							.shop-title {
								font-size: 32rpx;
								color: #1A1A1A;
								font-weight: bold;
							}

							.label-item {
								display: flex;
								align-items: center;

								.label-info {
									display: flex;
									align-items: center;
									background: #FEF3EF;
									padding: 6rpx 18rpx;
									margin-top: 20rpx;
									border-radius: 6rpx;

									.img {
										width: 25rpx;
										height: 25rpx;
										margin-right: 10rpx;
									}

									.tips {
										font-size: 24rpx;
										color: #FF6830;
									}
								}
							}

							.shop-tips {
								margin-top: 12rpx;
								width: 100%;
								padding: 5rpx 10rpx;
								background-color: #FEF3EF;
								display: flex;
								align-items: center;
								border-radius: 10rpx;
								text-align: center;

								image {
									width: 20rpx;
									height: 20rpx;
									margin-right: 10rpx;
								}

								.tips {
									font-size: 24rpx;
									color: #FF6831;
									font-weight: normal;
								}
							}

							.shop-score {
								display: flex;
								align-items: center;
								margin-top: 12rpx;

								.score {
									font-size: 28rpx;
									margin-left: 5rpx;
									color: #FF2F34;
								}
							}

							.shop-address {
								width: 100%;
								display: flex;
								justify-content: space-between;
								margin-top: 40rpx;

								.address-left {
									display: flex;
									justify-content: center;
									align-items: center;
									width: calc(100% - 100rpx);

									image {
										width: 24rpx;
										height: 24rpx;
										margin-right: 8rpx;
									}

									.address {
										width: calc(100% - 40rpx);
										font-size: 24rpx;
										color: #767676;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}

								.address-right {
									display: flex;
									justify-content: center;
									align-items: center;

									image {
										width: 20rpx;
										height: 20rpx;
										margin-right: 4rpx;
									}

									.distance {
										font-size: 24rpx;
										color: #767676;
									}
								}
							}
						}
					}
				}





			}

			.shop-block {
				padding: 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin: 20rpx 0;

				.shop {
					display: flex;

					.shop-left {
						width: 80rpx;
						height: 80rpx;
						border-radius: 20rpx;
						margin-right: 10rpx;
					}

					.shop-right {
						width: calc(100% - 90rpx);

						.shop-title {
							font-size: 28rpx;
							color: #1A1A1A;
						}

						.shop-address {
							width: 100%;
							display: flex;
							justify-content: space-between;
							margin-top: 12rpx;

							.address-left {
								width: calc(100% - 120rpx);
								display: flex;
								justify-content: center;
								align-items: center;

								image {
									width: 20rpx;
									height: 20rpx;
									margin-right: 8rpx;
								}

								.address {
									width: calc(100% - 30rpx);
									font-size: 24rpx;
									color: #767676;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}

							.address-right {
								display: flex;
								justify-content: center;
								align-items: center;

								image {
									width: 20rpx;
									height: 20rpx;
									margin-right: 4rpx;
								}

								.distance {
									font-size: 24rpx;
									color: #767676;
								}
							}
						}
					}
				}

				.line {
					width: 100%;
					height: 2rpx;
					background-color: #EEEEEE;
					margin: 20rpx 0;
				}

				.preference {
					display: flex;
					margin-top: 30rpx;

					.preference-left {
						width: 220rpx;
						height: 220rpx;
						margin-right: 20rpx;
						border-radius: 20rpx;
					}

					.preference-right {
						width: calc(100% - 240rpx);

						.preference-rightTop {
							.preference-title {
								color: #1A1A1A;
								font-weight: bold;
								font-size: 32rpx;
							}

							.preference-tips {
								display: flex;
								margin-top: 10rpx;

								.preference-item {
									padding: 0 12rpx;
									border: 1px solid #FF2F34;
									color: #FF2F34;
									border-radius: 6rpx;
									margin-right: 10rpx;
									font-size: 24rpx;
								}

								.preference-item:last-child {
									margin-right: 0;
								}
							}
						}

						.preference-rightBottom {
							display: flex;
							margin-top: 30rpx;

							.price {
								width: 75%;
								// padding-left: 40rpx ;
								padding: 10rpx 0 10rpx 40rpx;
								background-color: #FEF3EF;
								border-radius: 50px 0 0 50px;

								.price-top {
									display: flex;
									align-items: center;
									position: relative;

									.current-price {
										font-size: 36rpx;
										color: #FF2F34;
										margin-right: 8rpx;
									}

									.original-price {
										font-size: 24rpx;
										color: #FF2F34;

										.price-line {
											position: absolute;
											top: 24rpx;
											background-color: #FF2F34;
											width: 55rpx;
											height: 3rpx;
										}
									}
								}

								.price-bottom {
									font-size: 20rpx;
									color: #FF2F34;
								}
							}

							.rob {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 25%;
								background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
								border-radius: 0px 50px 50px 0px;

								.rob-word {
									font-size: 36rpx;
									color: #FFFFFF;
									margin-right: 7rpx;
								}

								image {
									width: 20rpx;
									height: 20rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>